import { useEffect } from 'react';
import styles from './home.module.scss';
import { BallCart } from '../../components/ballCart/ballCart';
import { useAppDispatch, useAppSelector } from '../../store/hooks';
import { fetchBallsSlice } from '../../store/balls/balls.actions';

export const Home = () => {
	const dispatch = useAppDispatch();
	const { balls } = useAppSelector((state) => state.balls);
	const isLoading = true;
	useEffect(() => {
		dispatch(fetchBallsSlice());
	}, [dispatch]);
	return (
		<div className={styles.container}>
			{isLoading ? 
			
				<FadeLoader
					color={'#ffa500'}
					loading={isLoading}
					cssOverride={override}
					size={150}
					aria-label="Loading Spinner"
					data-testid="loader"
				/> : 
				<>
					{balls && balls.map((ball) => (
						<BallCart key={ball.id} ball={ball} />
					))}
				</>
			}
			
		</div>
	);
};
